<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css" />

    <title>动态表格</title>
  </head>
  <body>
    <div id="app">
      <div class="container mt-5">
        <div class="row justify-content-center mb-2">
          <div class="col-6 ml-5">
            <input
              type="text"
              placeholder="员工编号"
              v-model="id"
              :disabled="flag"
            />
            <input type="text" placeholder="员工姓名" v-model="name" />
            <input type="button" @click="addHandle" value="添加" />
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-6">
            <table class="table table-striped table-bordered text-center">
              <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>入职时间</th>
                <th>操作</th>
              </tr>
              <tr :key="emp.id" v-for="emp in emps">
                <td>{{emp.id}}</td>
                <td>{{emp.name}}</td>
                <td>{{emp.hireDate}}</td>
                <td>
                  <a href="" @click.prevent>删除</a>
                  <span>|</span>
                  <a href="" @click.prevent="editHandle(emp.id)">修改</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jQuery/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          flag: false,
          id: "",
          name: "",
          emps: [
            {
              id: 1001,
              name: "haoren",
              hireDate: "",
            },
            {
              id: 1002,
              name: "lucy",
              hireDate: "",
            },
            {
              id: 1003,
              name: "lily",
              hireDate: "",
            },
            {
              id: 1004,
              name: "jerry",
              hireDate: "",
            },
            {
              id: 1005,
              name: "batman",
              hireDate: "",
            },
          ],
        },
        methods: {
          addHandle() {
            if (this.flag) {
              //表示为修改数据
              //1. 根据当前的id更新集合中的数据
              this.emps.some((item) => {
                if (item.id == this.id) {
                  item.name = this.name;
                  //完成更新之后,终止循环
                  return true;
                }
              });
              this.flag = false;
            } else {
              //添加数据
              let emp = {};
              emp.id = this.id;
              emp.name = this.name;
              emp.hireDate = "";
              //将emp添加到emps中
              this.emps.push(emp);
            }
            //清除输入框中的内容
            this.id = "";
            this.name = "";
          },
          editHandle(id) {
            console.log(id);
            //将id的文本框设置为不可编辑
            this.flag = true;
            //1. 根据id从emps中获得对应的数据
            let emp = this.emps.filter((obj) => obj.id == id);
            console.log(emp);
            this.id = emp[0].id;
            this.name = emp[0].name;
          },
        },
      });
    </script>
  </body>
</html>
